<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/search.css"/>
    <script src="js/jq.js"></script>
    <title></title>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">

<table id="myTable">
    <tr class="header">
        <th style="width:60%;">名称</th>
        <th style="width:40%;">城市</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
    </tr>
</table>
<script>
    myFunction=function(){
        var tr=$("#myTable tr").not(".header");
        var val=$("#myInput").val();
        for(var i=0;i<tr.length;i++){
            var x=$("#myTable tr").not(".header").eq(i).children().eq(0).text();
            if(x.indexOf(val)>-1){
               $("#myTable tr").not(".header").eq(i).css("display","");
           }
            else{
               $("#myTable tr").not(".header").eq(i).css("display","none");
           }
        }
    }
</script>
</body>
</html>